<template>
  <div class="Index-box">
    <div class="inputbox">
      <div class="titelon">饿了么</div>
      <input type="text" placeholder="输入商家，商品名称" />
    </div>
    <div class="swiper"></div>
    <div class="list">
      <div class="titel">
        <h2>猜你喜欢</h2>
        <div class="tieon">
          <span
            v-for="(item, index) in passlist"
            :key="index"
            @click="curt(index)"
            :class="{ active: current == index }"
            >{{ item }}</span
          >
        </div>
        <div class="tion">
          <span v-for="(item, index) in tionlist" :key="index">
            {{ item }}
          </span>
        </div>
      </div>
      <div class="good" v-for="(item, index) in tasklist" :key="index">
        <div class="img-box">
          <img :src="item.picUrl" alt="" />
        </div>
        <div class="text">
          <div class="name">{{ item.name }}</div>
          <div class="shou">
            <div class="price">{{ item.price }}</div>
            <div class="desc">{{ item.monthSalesTip }}</div>
          </div>
          <div class="song">
            <span>{{ item.minPriceTip }} </span>
            <span>{{ item.shippingFeeTip }}</span>
            <span>{{ item.deliveryTimeTip }}</span>
            <span>{{ item.wmPoiScore }}</span>
            <span>{{ item.distance }}</span>
          </div>
        </div>
      </div>
    </div>
 
  </div>
</template>

<script>
//本地导入
import { shopList } from "../api";
export default {
  data() {
    return {
      current: 0,
      passlist: ["综合排序", "距离最近", "销量最高", "筛选"],
      tionlist: ["年货节热卖", "津贴联盟", "满减优惠", "品质联盟"],
      tasklist: [],
  
    };
  },
  mounted() {
    shopList({ statu: 0 }).then((res) => {
      console.log(res.data);
      this.tasklist = res.data.list;
    });
    // console.log(this.tasklist);
  },
  methods: {
    curt(index) {
      this.current = index;

      if (index == 1) {
        this.tasklist.sort((a, b) => {
          return a.distance - b.distance;
        });
      }

      if (index == 2) {
        this.tasklist.sort((a, b) => {
          return b.wmPoiScore - a.wmPoiScore;
        });
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.inputbox {
  height: 100px;
  background-color: rgb(0, 183, 255);
  border: 1px solid transparent;
}
.titelon {
  margin: 10px;
  font-size: 20px;
  color: #fff;
}
.inputbox input {
  height: 40px;
  width: 100%;
  text-align: center;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 20px;
}
.swiper {
  height: 300px;
  width: 98%;
  margin: 10px auto;
  background: url(../assets/3.jpg) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgb(0, 183, 255);
}
.list {
  margin: 10px;
}
.tieon {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}

.list .tion {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.list .tion span {
  padding: 10px;
  background-color: #ccc;
  border-radius: 10px;
}
.list .good {
  height: 120px;
  background-color: aliceblue;
  margin: 10px 0;
  border-radius: 10px;
  display: flex;
}
.list .good .img-box {
  width: 120px;
  margin-right: 10px;
}
.list .good img {
  width: 100%;
}
.list .good .text {
  flex: 1;
}
.list .good .text .name {
  font-size: 20px;
  font-weight: bold;
}
.shou {
  display: flex;
}
.shou div {
  padding: 6px;
}
.shou div:nth-child(1) {
  color: orange;
}
.song {
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  color: rgb(157, 155, 155);
}

.tieon span.active {
  color: red;
}
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  width: 98%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  background-color: rgb(0, 183, 255);
  color: #fff;
}

.tabbar span.active {
  color: red;
  border-bottom: 2px solid red;
  font-weight: bold;
}
</style>>

